<template>
  <view class="container">
    <view class="card">
      <!-- ?人想去 -->
      <view class="wanttogo">{{ wantToGoCount }}人想去</view>
      <!-- 图片容器 -->
      <view class="image-container">
        <image :src="imageUrl" mode="aspectFill" />
      </view>
      <!-- 内容容器 -->
      <view class="content-container">
        <view class="content">
          <!-- 顶部内容 -->
          <view class="top">
            <!-- 日期 -->
            <view class="date">
              <text class="md">{{ dateView }}</text>
              <text class="w">{{ weekView }}</text>
            </view>
            <!-- 标题 -->
            <view class="title">{{ title }}</view>
          </view>
          <!-- 底部内容 -->
          <view class="bottom">
            <view class="more">
              <!-- 描述 -->
              <view class="desc">
                <view class="duration">{{ duration }}</view>
                <view class="location">{{ location }}</view>
              </view>
              <!-- 点击了解按钮 -->
              <view class="btn" @click="gotoActivityInfo">点击了解</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
  imageUrl: {
    type: String,
    default: "",
  },
  date: {
    // '2025-6-6'
    type: String,
    default: "",
  },
  duration: {
    // '15:30-18:00'
    type: String,
    default: "",
  },
  location: {
    type: String,
    default: "",
  },
  wantToGoCount: {
    type: Number,
    default: 0,
  },
});

// 格式化日期显示
// 将 '2025-6-6' 转换为 '06.06'
const dateView = computed(() => {
  if (!props.date) return "";
  const [day, time] = props.date.split(" ");
  // 拿到年月日
  const [y, m, d] = day.split("-");
  // 补零处理
  const monthView = m.length === 1 ? `0${m}` : m;
  const dayView = d.length === 1 ? `0${d}` : d;
  // 返回格式化后的日期
  // 例如：'06.06'
  return `${monthView}.${dayView}`;
});

// 星期计算
const weekView = computed(() => {
  const [day, time] = props.date.split(" ");
  // 拿到年月日
  const [y, m, d] = day.split("-").map(Number);

  // 拿到日期对象
  const date = new Date(y, m - 1, d);
  // 星期映射
  const days = ["日", "一", "二", "三", "四", "五", "六"];
  // 拿到星期几
  return `星期${days[date.getDay()]}`;
});

const gotoActivityInfo = () => {
  // 跳转到活动详情页面
  uni.navigateTo({
    url: `/pages/treehole/activityInfo?id=${props.id}`,
  });
};
</script>

<style scoped lang="less">
.container {
  box-sizing: border-box;
  padding: 3vw;

  .card {
    position: relative;
    display: flex;
    height: 45vw;
    border-radius: 2vw;
    overflow: hidden;
    box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.3);

    .wanttogo {
      position: absolute;
      left: 2vw;
      bottom: 2vw;
      font-size: 2.5vw;
      color: white;
      padding: 1.2vw;
      border-radius: 1vw;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .image-container {
      flex: 2;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .content-container {
      flex: 3;

      .content {
        height: 100%;
        padding: 4vw 3vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        .top {
          font-weight: bold;
          .date {
            display: flex;
            align-items: flex-end;
            gap: 1vw;
            .md {
              font-size: 6vw;
            }
            .w {
              font-size: 3.5vw;
            }
          }
          .title {
            font-size: 4vw;
          }
        }
        .bottom {
          .more {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .desc {
              display: flex;
              flex-direction: column;
              color: #888;
              font-size: 3vw;
            }
            .btn {
              flex-shrink: 0;
              background-color: #d4e98c;
              padding: 1.5vw 4vw;
              border-radius: 4vw;
              font-size: 3vw;
            }
          }
        }
      }
    }
  }
}
</style>
